<template>
	<view class="menu">
		<u-list v-if="dataList.length > 0">
			<u-list-item v-for="(item, index) in dataList" :key="index">
				<view 
					v-if="selType==='1'"
					class="mItem flex justify-between align-center line-white"
					:class="item.id===2?'shareholder-bg':item.id===3 || item.id===5?'shopowner-bg':'staff-bg'"
				>
					<view class="flex flex--row">
						<text class="fsize-36 fweigh-600">{{item.name}}</text>
						<text class="fsize-20 mt-10">{{item.explain}}</text>
					</view>
					<view class="btn cor" @click="handIndex(item)">立即切换</view>
				</view>
				<view class="padding-20 bg-white mb-20 border-radius-10" v-if="selType==='2'" @click="onStore(item)">
					<text>{{item.storeName}}</text>
				</view>
			</u-list-item>
		</u-list>
		<u-empty text="内容为空" mode="data" v-if="dataList.length===0" marginTop="200" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				thisRole:{},
				dataList:[],
				selType:'1', // 1 切换身份 2 切换门店
				loadMore: false,
				searchData: {
					allStore: 1,
					staffId: null,
					page: 1, 
					limit: 20
				}
			}
		},
		onLoad(opt) {
			this.selType = opt.type
			if(opt.type === '1'){
				uni.setNavigationBarTitle({
					title:'切换身份'
				})
				this.getRoles();
			}else if(opt.type === '2'){
				uni.setNavigationBarTitle({
					title:'切换门店'
				})
				this.getStoresPageList()
			}
			
		},
		computed: {
			...mapState(['userInfo', 'token'])
		},
		onReachBottom() {
			if(this.loadMore){
				this.getStoresPageList()
			}
		},
		methods: {
			...mapMutations(['setUserInfo', 'setStore']),
			onStore(row){
				this.$reqJsonPost('ChangeStore', {id: row.storeId, data: this.token}).then(res=>{
					this.setStore(res.data)
					uni.reLaunch({
						url: '/pages/index/index'
					});
				})
			},
			getStoresPageList(){
				this.$reqPost('GetStoresPageList', { ...this.searchData, staffId: this.userInfo.userId}).then(res=>{
					this.dataList = [...this.dataList, ...res.data]
					if(res.count > this.dataList.length){
						this.searchData.page ++
						this.loadMore = true
					}else {
						this.loadMore = false
					}
				})
			},
			handIndex(e) {
				this.$reqJsonPost('ChangeRoleCategory', {id: e.id}).then(res=>{
					const use = {
						...this.userInfo,
						roleCategoryId: e.id
					}
					this.setUserInfo(use)
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
			},
			getRoles() {
				var that = this;
				that.$reqJsonPost('GetUserCanChangeRoleList', {id: that.userInfo.roleCategoryId}).then(res => {
					that.dataList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu {
		padding: 20rpx 30rpx 0 30rpx;
		.mItem {
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding: 60rpx 30rpx;

			.btn {
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 30rpx;
				background-color:#fff;
				font-size: 24rpx;
			}
		}
		.shareholder-bg{
			background: linear-gradient(to bottom right, #f68e07, #f4b945);
			.cor{
				color:#ef9137;
				box-shadow: 0 5px 5px rgba(237, 80, 24, 0.6);
			}
		}
		.shopowner-bg{
			background: linear-gradient(to bottom right,#d93558,#e88462);
			.cor{
				color:#d93558;
				box-shadow: 0 5px 5px rgba(232, 92, 101, 0.6);
			}
		}
		.staff-bg{
			background: linear-gradient(to bottom right,#513fe3,#5da0ef);
			.cor{
				color:#513fe3;
				box-shadow: 0 5px 5px rgba(232, 92, 101, 0.6);
			}
		}
	}
</style>
